<template>
	<div class="zh-platform">
		<nav-header></nav-header>
		<div class="zh-tab">
			<div class="zh-t-nav clear" style="display: none">
				<span @click="changePanel('basic')" :class="activePanel === 'basic' ? 'is-active' : ''" >基本信息</span>
				<span  @click="changePanel('seo')"  :class="activePanel === 'seo' ? 'is-active' : ''" >平台SEO</span>
			</div>
			<div class="zh-t-list">
				<transition name="fade" mode="in-out">
					<div class="zh-t-list-one" v-if="activePanel === 'basic'">
						<el-form label-position="left" label-width="150px" :model="getPlatform" ref="getPlatform" @submit.native.prevent>
							<el-form-item label="平台用户名">
							    <span>{{getPlatform.user}}</span>
							</el-form-item>
							<el-form-item label="平台名称">
								<div v-if="nameShow">
									<span>{{getPlatform.name}}</span>&nbsp;
									<i class="el-icon-edit-outline" title="编辑" @click="nameShowFunc(false)"></i>
								</div>
								<el-input  v-else
									v-model="getPlatform.name"
									:autofocus="true"
									 maxlength="150"
									placeholder="请输入平台名称">
								</el-input>
								 <el-button v-show="!nameShow" type="primary" @click="saveBasicContent()">保存</el-button>
							</el-form-item>
							<el-form-item label="平台域名">
							    <span>{{getPlatform.domain}}</span>
							</el-form-item>
							<el-form-item label="联系地址">
								<div v-if="addShow">
									<span>{{getPlatform.address}}</span>&nbsp;
									<i class="el-icon-edit-outline" title="编辑" @click="addShowFunc(false)"></i>
								</div>

								<el-input v-else
									v-model="getPlatform.address"
									 maxlength="80"
									:autofocus="true"
									placeholder="请输入联系地址">
								</el-input>
								<el-button v-show="!addShow" type="primary" @click="saveBasicContent()">保存</el-button>
							</el-form-item>
						</el-form>
					</div>
				</transition>
				<transition name="fade" mode="in-out">
					<div class="zh-t-list-two" v-if="activePanel === 'seo'">
						<div class="zh-text">
							SEO设置的目的是为了使当前站点更容易被各大搜索平台精准搜索到，SEO值设置完成后，请等待搜索引擎收录您设置的内容，搜索引擎的收录速度跟当前站点的访问量、搜索热度等条件有关，如果您希望快速被收录，也可以对各大搜索平台主动提交站点链接，具体的提交方法请参考各搜索平台的说明
						</div>
						<div class="zh-t-from">
							<el-form label-position="left" label-width="100px" :model="getSEO" :rules="getSEORules" ref="getSEO">
								<el-form-item label="标题" prop="title">
								    <el-input v-model="getSEO.title" placeholder="请输入SEO标题"></el-input>
								</el-form-item>
								<el-form-item label="关键字" prop="keyword">
								    <el-input v-model="getSEO.keyword" placeholder="请输入SEO关键字（用中文 ; 隔开）"></el-input>
								</el-form-item>
								<el-form-item label="描述" prop="desc">
								    <el-input type="textarea" v-model="getSEO.desc" placeholder="请输入描述内容"
								    :maxlength="parseInt(140)" :autosize="{ minRows: 6}" ></el-input>
								    <span class="zh-t-number">{{number}}<span>/ 140</span>
								    </span>
								</el-form-item>
								<el-form-item>
									<el-button size="medium" type="primary" @click="saveSeoContent('getSEO')">保存</el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</transition>
			</div>
		</div>
	</div>
</template>
<script>
  	export default {
	    data() {
		    return {
		        getPlatform: {
		        	user: JSON.parse(sessionStorage.getItem('user_info_str')).name,
		        	name: 'ITC智慧教育',
		        	domain: document.domain,
		        	address: '广东省广州市东风路',
		        },
		        getSEO: {
		        	title: null,
		        	keyword: null,
		        	desc: null,
				},
				getSEORules: {
					title: [
						{ pattern:this.rules.leftTrim.reg,message: this.rules.leftTrim.msg, trigger: 'blur'},
						{ pattern:this.rules.rightTrim.reg,message: this.rules.rightTrim.msg, trigger: 'blur'}
					],
					keyword: [
						{ pattern:this.rules.leftTrim.reg,message: this.rules.leftTrim.msg, trigger: 'blur'},
						{ pattern:this.rules.rightTrim.reg,message: this.rules.rightTrim.msg, trigger: 'blur'}
					],
					desc: [
						{ pattern:this.rules.leftTrim.reg,message: this.rules.leftTrim.msg, trigger: 'blur'},
						{ pattern:this.rules.rightTrim.reg,message: this.rules.rightTrim.msg, trigger: 'blur'}
					]
				},
		        platformInformation: true,
		        platformSeo: false,
		        number: '0',
		        addShow:true,
		        nameShow:true,
		        activePanel: 'seo'
		    };
	    },
	    created(){
	    	this.getSeoContent();
	    	this.getBasicContent();
	    },
	    watch:{
        	'getSEO.desc'(){
        		this.number = this.getSEO.desc.length
        	}
      	},
	    methods: {
			changePanel(panel){
					this.activePanel = panel;
					if( this.activePanel === 'basic' ){
						this.getBasicContent();
					}else{
						this.getSeoContent();
					}
			},
	        /*保存SEO*/
	        saveSeoContent(val){
                // this.$refs[formName].validate((valid) => {
					// if (valid) {
  					    this.$ajax.post('api/setting/seo', this.getSEO )
                    // }
  				// })
	        },
	        /*获取SEO*/
	        getSeoContent(){
				// 重写成功回调
				let success = ( data => {
					this.getSEO = data.data
				});
				this.$ajax.get('api/setting/seo',{func:{success:success}})
			},
  			 	/*保存基本信息*/
	        saveBasicContent(){
	        	let success = (data=>{
	        		this.$message.success(data.msg)
	        		this.addShowFunc(true);
	        		this.nameShowFunc(true)
	        	})
				
	        	if(!checkSpace(this.getPlatform.name) || !checkSpace(this.getPlatform.address)) {
  					return this.$message.error('请输入内容再提交')
	        	} else {
	        		this.$ajax.post('api/setting/basic', this.getPlatform ,{func:{success:success}})
	        	}
	        },
	        /*获取基本信息*/
	        getBasicContent(){
				// 重写成功回调
				let success = ( data => {
					this.getPlatform.name = data.data.platform_name
					this.getPlatform.address = data.data.platform_address
				});
				this.$ajax.get('api/setting/basic',{func:{success:success}})
			},
			addShowFunc(status){
				this.addShow = status;
			},
			nameShowFunc(status){
				this.nameShow = status
			},
    	}
  	};
</script>
<style lang="scss">
	.zh-platform {
		.zh-t-nav {
			padding-top: 14px;
			padding-bottom: 36px;
			span {
				float: left;
				padding: 7px 20px;
				border: 1px solid #e6e6e6;
				cursor: pointer;
				&:hover {
					color: #fff;
					background: #348EFC;
					border: 1px solid #348EFC;
				}
			}
			.is-active {
				color: #fff;
				background: #348EFC;
				border: 1px solid #348EFC;
			}
		}
		.el-form-item__label {
			color: #000;
		}
		.zh-text {
			width: 700px;
			line-height: 24px;
			padding: 10px 16px;
			color: #5C7BC5;
			background: #DEEFFF;
		}
		.zh-t-from {
			width: 732px;
			margin-top: 22px;
			.el-textarea__inner {
				padding: 15px;
			}
			.zh-t-number {
				position: absolute;
				right: 2px;
				bottom: 1px;
				width: 60px;
			    height: 20px;
			    line-height: 20px;
			    font-size: 12px;
			    text-align: center;
			    background: #fff;
			    span {
			    	color: #3A3A3A;
			    }
			}
		}
		.zh-t-list {
			position: relative;
			>div {
				position: absolute;
			}
		}
		.zh-t-list-one {
			width: 100%;
			.el-form-item__content {
				.el-input {
					width: 220px;
				}
			}
			.el-icon-edit-outline {
				font-size: 20px;
				color: #409EFF;
				cursor: pointer;
				vertical-align: middle;
			}
		}
	}
</style>
